<template>
  <div class="announcementList">
    <rx-layout>
      <template v-slot:center>
        <rx-grid :url="'/api-portal/portal/core/insNews/query'">
          <template v-slot:center="{record}">
              <view class="rx-news"  @click="readNews(record)">
                  <view class="rx-news-center">
                      <view class="rx-news-le">
                          <view class="rx-news-name">{{ record.subject }}</view>
                          <view class="rx-news-keywords">{{record.keywords}}</view>
                      </view>
                      <view class="rx-news-image" v-if="record.imgFileId">
                          <image :src="imageUrl(record.imgFileId)"/>
                      </view>
                  </view>
                  <view class="rx-user">
                      <view><my-icon style="margin-right: 0.25rem" type="icon-people"></my-icon><span style="font-size: 0.8rem">{{record.authorName}}</span></view>
                      <view><my-icon style="margin-right: 0.25rem" type="icon-clock"></my-icon><span style="font-size: 0.8rem">{{record.createTime}}</span></view>
                  </view>
              </view>
          </template>
        </rx-grid>
      </template>
    </rx-layout>
  </div>
</template>

<script>
import RxGrid from '@/components/RxGrid'
import RxLayout from '@/components/RxLayout'
import TokenUtil from "@/common/TokenUtil";
export default {
  name: "announcementList",
  components: {RxGrid, RxLayout},
  data() {
    return {}
  },
  methods: {
    i18n(name, text, key) {
      return this.$ti18(name, text, "particularsLang", key);
    },
    readNews(record){
      uni.navigateTo({
        url: '/views/modules/announcement/announcementDetails?pkId='+record.pkId
      });
    },
      imageUrl(fileId) {
          if (!fileId) {
              return;
          }
          let token = TokenUtil.getToken();
          return this.realUrl()+"/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
      },
  }
}
</script>

<style scoped>
.rx-news{
    border-radius: .5rem;
    background: #fff;
    width: calc(100% - 1rem);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
}
.rx-news-center{
    display: flex;
    overflow: initial;
    align-items: center;
}
.rx-news-le{
    flex: 1;
    overflow: hidden;
}
.rx-news-name{
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: bold;
}
.rx-news-keywords{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.8rem;
    color: rgb(110 121 133);
    margin-top: 0.25rem
}
.rx-news-image{
    width: 5rem;
    height: 4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-left: 0.5rem;
}
.rx-news-image image{
    width: 100%;
    height: 100%;
}
.rx-user{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 1rem;
}
</style>
